<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="'info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item1">item-1</li>
                <li class="item2">item-2</li>
                <li class="item3">item-3</li>
                <li class="item4">item-4</li>
                <li class="item5">item-5</li>
                <li class="item6">item-6</li>
                <li class="item7">item-7</li>
                <li class="item8" >item-8</li>
                <li class="item9">item-9</li>
            </ul>
        </div>
    </div>
</div>
<script src="/vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var element=  //通过关系查找jquery对象,选取元素的父元素
        console.log(element)

        var element1=$('#box1').$('#info').parents('div')children();//不返回文本节点
        var element2=$('#box1').contents();//返回文本节点
        console.log(element)
        //find（[selector]）通过选择器来筛选其中的后代元素
        //parent([selector])返回直接父节点
        console.log($('#info').parent('#box2'))
        //parents([selector])返回所有父节点
        console.log($('#info').parents('#box2'))
        //parentsUntil([selector])返回到某一父节点为止
        console.log($('#info').parentsUntil('#box1'))
        //先找自身，然后再往上找,返回0个或1个元素
        console.log($('#info').closest('#info'))

        //往后走
        console.log($('.item4').next('li'))
        console.log($('.item4').nextAll('li'))
        console.log($('.item4').nextUntil('.item7'))

        //往前走
        console.log($('.item4').prev('li'))
        console.log($('.item4').prevAll('li'))
        console.log($('.item4').preUntil('.item7'))

        //过滤元素 .not(selector)
        console.log($('li').not('.item4'))

        //获取子集 .slice(start[,end])
        console.log($('li').slice(3,5))

        //判断元素标签是否存在,返回true或者false
        console.log($('#box3').children().is('p'))

        //end结束破坏性操作：任何对jquery对象进行改变的操作
        console.log(
            $('#box3').find('.item4').css('color','red')
                .end().find('.item6').css('color','blue')

        )

        //进行破坏性操作后又想将原来的元素包含进来addBack([selector])
        //即想给5涂颜色，也想给4涂颜色
        console.log($('.item4').nextUntil('.item6').addBack()
            .css('color','orange')
        )








    })
</script>
</body>
</html>